<template>
	<view class="content">
		<view class="searchBox">
			<input type="text" class="inputSearch" placeholder="请输入关键字" placeholder-class="placeholder" />
			<image :src="$baseurl+'category/search-black.png'" class="searchIcon"></image>
		</view>
		<view class="dataBox">
			<view class="dataItem">
				<view class="shopHead">
					<text class="recommend">店铺推荐</text>
					<text class="join">进入店铺 ></text>
				</view>
				<view class="shopInfoBox">
					<image :src="$baseurl+'category/search-black.png'" class="shopAvatar"></image>
					<text class="shopName">店铺名字1</text>
					<text class="sold">已售9999</text>
				</view>
				<view class="listBox">
					<view class="listItem">
						<image :src="$baseurl+'project/test.png'" class="cover"></image>
						<text class="name">可爱风纯棉T恤</text>
						<view class="priceBox">
							<text class="sellPrice">￥100</text>
							<text class="linePrice">原价200</text>
						</view>
					</view>
					<view class="listItem">
						<image :src="$baseurl+'project/test.png'" class="cover"></image>
						<text class="name">可爱风纯棉T恤</text>
						<view class="priceBox">
							<text class="sellPrice">￥100</text>
							<text class="linePrice">原价200</text>
						</view>
					</view>
					<view class="listItem">
						<image :src="$baseurl+'project/test.png'" class="cover"></image>
						<text class="name">可爱风纯棉T恤</text>
						<view class="priceBox">
							<text class="sellPrice">￥100</text>
							<text class="linePrice">原价200</text>
						</view>
					</view>
					<view class="listItem">
						<image :src="$baseurl+'project/test.png'" class="cover"></image>
						<text class="name">可爱风纯棉T恤</text>
						<view class="priceBox">
							<text class="sellPrice">￥100</text>
							<text class="linePrice">原价200</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="dataBox">
			<view class="dataItem">
				<view class="shopHead">
					<text class="recommend">店铺推荐</text>
					<text class="join">进入店铺 ></text>
				</view>
				<view class="shopInfoBox">
					<image :src="$baseurl+'category/search-black.png'" class="shopAvatar"></image>
					<text class="shopName">店铺名字1</text>
					<text class="sold">已售9999</text>
				</view>
				<view class="listBox">
					<view class="listItem">
						<image :src="$baseurl+'project/test.png'" class="cover"></image>
						<text class="name">可爱风纯棉T恤</text>
						<view class="priceBox">
							<text class="sellPrice">￥100</text>
							<text class="linePrice">原价200</text>
						</view>
					</view>
					<view class="listItem">
						<image :src="$baseurl+'project/test.png'" class="cover"></image>
						<text class="name">可爱风纯棉T恤</text>
						<view class="priceBox">
							<text class="sellPrice">￥100</text>
							<text class="linePrice">原价200</text>
						</view>
					</view>
					<view class="listItem">
						<image :src="$baseurl+'project/test.png'" class="cover"></image>
						<text class="name">可爱风纯棉T恤</text>
						<view class="priceBox">
							<text class="sellPrice">￥100</text>
							<text class="linePrice">原价200</text>
						</view>
					</view>
					<view class="listItem">
						<image :src="$baseurl+'project/test.png'" class="cover"></image>
						<text class="name">可爱风纯棉T恤</text>
						<view class="priceBox">
							<text class="sellPrice">￥100</text>
							<text class="linePrice">原价200</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="dataBox">
			<view class="dataItem">
				<view class="shopHead">
					<text class="recommend">店铺推荐</text>
					<text class="join">进入店铺 ></text>
				</view>
				<view class="shopInfoBox">
					<image :src="$baseurl+'category/search-black.png'" class="shopAvatar"></image>
					<text class="shopName">店铺名字1</text>
					<text class="sold">已售9999</text>
				</view>
				<view class="listBox">
					<view class="listItem">
						<image :src="$baseurl+'project/test.png'" class="cover"></image>
						<text class="name">可爱风纯棉T恤</text>
						<view class="priceBox">
							<text class="sellPrice">￥100</text>
							<text class="linePrice">原价200</text>
						</view>
					</view>
					<view class="listItem">
						<image :src="$baseurl+'project/test.png'" class="cover"></image>
						<text class="name">可爱风纯棉T恤</text>
						<view class="priceBox">
							<text class="sellPrice">￥100</text>
							<text class="linePrice">原价200</text>
						</view>
					</view>
					<view class="listItem">
						<image :src="$baseurl+'project/test.png'" class="cover"></image>
						<text class="name">可爱风纯棉T恤</text>
						<view class="priceBox">
							<text class="sellPrice">￥100</text>
							<text class="linePrice">原价200</text>
						</view>
					</view>
					<view class="listItem">
						<image :src="$baseurl+'project/test.png'" class="cover"></image>
						<text class="name">可爱风纯棉T恤</text>
						<view class="priceBox">
							<text class="sellPrice">￥100</text>
							<text class="linePrice">原价200</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.listBox {
		width: 635rpx;
		margin-left: 35rpx;
		overflow-x: scroll;
		display: flex;
		.listItem {
			width: 230rpx;
			display: flex;
			flex-direction: column;
			margin-right: 25rpx;
			margin-top: 35rpx;
			.cover {
				width: 230rpx;
				height: 230rpx;
				border-radius: 15rpx;
			}

			.name {
				width: 100%;
				margin-top: 15rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				font-size: 28rpx;
			}

			.priceBox {
				display: flex;
				margin-top: 10rpx;
				align-items: center;
				.sellPrice {
					color: #D95945;
					font-size: 20rpx;
					font-weight: 700;
				}

				.linePrice {
					color: #919191;
					font-size: 16rpx;
					font-weight: 500;
					margin-left: 25rpx;
					text-decoration: line-through;
				}
			}
		}

	}

	.dataBox {
		width: 670rpx;
		margin-top: 50rpx;
		margin-left: 40rpx;
		background-color: #fff;
		.dataItem {
			width: 100%;
			height: 600rpx;
			border-radius: 15rpx;

			.shopInfoBox {
				height: 72rpx;
				width: 600rpx;
				display: flex;
				align-items: center;
				margin-left: 35rpx;
				margin-top: 35rpx;
				position: relative;

				.shopAvatar {
					height: 72rpx;
					width: 72rpx;
					border-radius: 50%;
				}

				.shopName {
					margin-left: 25rpx;
					font-size: 28rpx;
				}

				.sold {
					position: absolute;
					font-size: 20rpx;
					color: #919191;
					right: 0;
					line-height: 72rpx;
				}
			}

			.shopHead {
				width: 100%;
				height: 90rpx;
				background: url('https://miantou.guguan.net/img/category/shopHead.png');
				background-size: 100% 100%;
				padding-left: 35rpx;
				padding-right: 35rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.recommend {
					color: #fff;
					font-size: 28rpx;
				}

				.join {
					color: #fff;
					font-size: 20rpx;
				}
			}
		}
	}

	.searchBox {
		position: relative;
		width: 453rpx;
		height: 64rpx;
		margin-left: 40rpx;
		margin-top: 100rpx;

		.searchIcon {
			position: absolute;
			width: 30rpx;
			height: 30rpx;
			left: 40rpx;
			top: 20rpx;
		}

		.inputSearch {
			width: 360rpx;
			height: 64rpx;
			border-radius: 32rpx;
			background-color: #F2F2F2;
			color: #000;
			font-size: 20rpx;
			font-weight: 500;
			padding-left: 90rpx;
		}
	}

	.content {
		width: 100%;
		height: 100vh;
		background-color: #F9FAFA;
		overflow-y: scroll;
	}
</style>